/**
 * Created by lucas on 2017/4/4.
 */
import React, {Component, PropTypes} from 'react';
import Button from './Button';

export default class Dialog extends Component {

    static propTypes = {
        header: PropTypes.string.isRequired,
        confirmLabel: PropTypes.string,
        modal: PropTypes.bool,
        onAction: PropTypes.func,
        hasCancel: PropTypes.bool,
    };

    static defaultProps = {
        confirmLabel: 'ok',
        modal: false,
        onAction: () => {},
        hasCancel: true,
    };

    componentWillUnmount() {
        document.body.classList.remove('DialogModalOpen');
    }

    componentDidMount() {
        if (this.props.modal) {
            document.body.classList.add('DialogModalOpen');
        }
    }

    render() {
        return (
            <div className={this.props.modal ? 'Dialog DialogModal' : 'Dialog'}>
                <div className={this.props.modal ? 'DialogModalWrap': null}>
                    <div className="DialogHeader">
                        {this.props.header}
                    </div>
                    <div className="DialogBody">
                        {this.props.children}
                    </div>
                    <div className="DialogFooter">
                        {this.props.hasCancel
                            ?   <span
                                    className="DialogDismiss"
                                    onClick={this.props.onAction.bind(this, 'dismiss')}
                                >
                                    Cancel
                                </span>
                            : null
                        }
                        <Button
                            onClick={
                                this.props.onAction.bind(this,
                                    this.props.hasCancel
                                        ? 'confirm'
                                        : 'dismiss')
                            }
                        >
                            {this.props.confirmLabel}
                        </Button>
                    </div>
                </div>
            </div>
        )
    };
}